<script type="text/javascript">
    RED.nodes.registerType('get-tag-change',{
        category: 'FUXA',
        color: '#a6bbcf',
        defaults: {
            name: {value:""},
            tag: {value:"", required:true}
        },
        inputs:0,
        outputs:1,
        icon: "white-globe.png",
        label: function() {
            return this.name||this.tag||"get tag change";
        },
        oneditprepare: function() {
            $.getJSON('/nodered/fuxa/devices', function(data) {
                var datalist = $('#fuxa-change-tags');
                datalist.empty();
                data.forEach(function(device) {
                    device.tags.forEach(function(tag) {
                        datalist.append('<option value="' + tag.name + '">' + device.name + ' - ' + tag.name + '</option>');
                    });
                });
            });
        }
    });
</script>

<script type="text/x-red" data-template-name="get-tag-change">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-tag"><i class="fa fa-tag"></i> Tag</label>
        <input type="text" id="node-input-tag" list="fuxa-change-tags" placeholder="Tag Name">
        <datalist id="fuxa-change-tags"></datalist>
    </div>
</script>

<script type="text/x-red" data-help-name="get-tag-change">
    <p>Monitor a FUXA tag for value changes in real-time.</p>
    <p>This node listens for tag change events and outputs the new value whenever the specified tag changes.</p>
    <h4>Output</h4>
    <ul>
        <li><code>msg.payload</code>: The new tag value</li>
        <li><code>msg.topic</code>: The tag name</li>
        <li><code>msg.tagId</code>: The internal tag ID</li>
        <li><code>msg.tagName</code>: The tag name</li>
        <li><code>msg.timestamp</code>: Timestamp of the change</li>
    </ul>
    <p>This node is event-driven and does not poll for changes, making it efficient for real-time monitoring. Use multiple instances to monitor different tags.</p>
</script>